<template>
  
    <el-dialog title="添加分类" width="560px" :visible.sync="editCategoryDialogVisible" :close-on-click-modal="false">
        <!-- rules表示绑定我们自定义的规则 -->
        <el-form :model="editDept" :rules="rules" ref="addForm">

            <el-form-item label="名称" label-width="78px" prop="title">
                <el-input v-model="editDept.title" autocomplete="off"></el-input>
            </el-form-item>
           
            
            <el-form-item label="排序" label-width="78px" prop="orderNum">
                <el-input-number v-model="editDept.orderNum" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number>
            </el-form-item>   
            <el-form-item label="是否显示" label-width="78px" prop="online">
                <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
            </el-form-item>
            <el-form-item label="图片" label-width="78px" prop="img">   
                <el-upload
                    class="avatar-uploader"
                    action=""
                    :show-file-list="false"
                    :http-request="editUploadFile"
                    
                    :on-success="handleMainImgSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="this.editDept.img" :src="this.editDept.img" class="avatar" style="width:90px;height:100px">

                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        <el-form-item label="描述" label-width="78px" prop="description">
                <el-input v-model="editDept.description" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeAndReset">取 消</el-button>
            <el-button type="primary" @click="sureEdit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
// import axios from 'axios'
import http from '@/utils/request.js'
const OSS = require('ali-oss')
    const client= new OSS({
      accessKeyId: 'LTAI5tBRSqJDJyEqimryPDzH',  // 查看你自己的阿里云KEY
      accessKeySecret: 'wP3KENQ5jPYlwSf0vKooIiFmOH9vT4', // 查看自己的阿里云KEYSECRET
      bucket: 'll0803', // 你的 OSS bucket 名称 
      region: 'oss-cn-hangzhou', // bucket 所在地址，我的是 华北2 北京
      // cname: true // 开启自定义域名上传
      // endpoint:"file.xxxx.live" // 自己的域名
    })
export default {
    data() {
        return {
            value: true,
            num : 0,
            specKeys:[],
            fileList:[],
            // editUserDialogVisible是用来控制弹出框是否显示, false表示不显示；true表示显示
            editCategoryDialogVisible: false,
            editDept: {},
            // 定义校验规则
            rules: {
                name: [
                    // required表示该值必须要填；message 表示违反规则的提示信息；trigger表示何时出发
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮件', trigger: 'blur' },
                    /**
                     * ^: 表示以X开头
                     * \w: a-zA-Z_0-9
                     * []: 表示中间的内容任选一个
                     * [-\w]{2,7}: 表示数字、字母、_、-出现的次数在2到7之间
                     * \.: 表示 “.” 的意思
                     * \d: 表示数字
                     * $: 表示必须以这些内容结尾
                     */
                    { pattern: /^\w[-\w]{2,7}@[0-9A-Za-z]{2,6}\.[\dA-Za-z]{2,6}$/, 
                        message: '邮件不符合规则', trigger: 'blur'}
                ],
                birthday: [
                    { required: true, message: '请输入生日', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        // 根据id查询，然后回显数据
        getById(id) {
            http.get(`category/edit/${id}`).then(res => {
                // res.data 就是用户数据
                this.editDept = res
                // for (let index = 0; index < res.sysDept.length; index++) {
                //     this.editUser.roleId.push(res.sysDept[index].id)
                // }
            }) 
        },
        // 用户确认编辑
        async sureEdit() {
            try {
                // 通过await的方式校验表单的时候，如果校验不通过，this.$refs.editForm.validate()
                // 会抛出异常
                // await this.$refs.editForm.validate()
                // this.editDept.deptId = this.editDept.deptId.reverse()[0]
                // 代码如果能走下来，表示校验通过
                console.log("this.editDept--------------->",this.editDept);
                await http.put(`/category`, this.editDept)
                console.log("this.editDept--------------->",this.editDept);
                // 编辑成功的提示消息
                this.$message({ message: '编辑成功', type: 'success', duration: 1000})
                // 隐藏模态框
                this.editCategoryDialogVisible = false
                // 重新查询数据
                this.$emit('refresh')
            }catch(err) {
                console.log(err);
            }
        },
        closeAndReset() {
            this.fileList = [] 
            // 隐藏模态框
            this.editCategoryDialogVisible = false
        },
/**
 * 
 * @param {oss使用函数} res 
 */
        //主图方法
        handleMainImgSuccess(res) {
        this.editDept.img = res.url
        // console.log(this.addSpu.mainImgUrl);
      },
      beforeAvatarUpload(file) {
        const isJPEG = file.type === 'image/jpeg'
        const isJPG = file.type === 'image/jpg'
        const isPNG = file.type === 'image/png'
        const imgFormat = !isJPG && !isJPEG && !isPNG
        const isLt4M = file.size / 1024 / 1024 < 4 
        if (imgFormat) {
          this.$message.error('上传头像图片只能是JPG或者PNG格式!');
        }
        if (!isLt4M) {
          this.$message.error('上传头像图片大小不能超过 4MB!');
        }
        return !imgFormat && isLt4M
      },
      async editUploadFile (options) {
    try {
        let file = options.file; // 拿到 file
        let fileName = file.name.substr(0,file.name.lastIndexOf('.'))
        let date = new Date().getTime()
        let fileNames = `${date}_${fileName}` // 拼接文件名，保证唯一，这里使用时间戳+原文件名
              // 上传文件,这里是上传到OSS的 uploads文件夹下
        client.put('category/' + fileNames, file).then(res=>{
        if (res.res.statusCode === 200) {
        options.onSuccess(res)
        }else {
            options.onError("上传失败")
        }
      })
        }catch (e) {
         options.onError("上传失败")
        }
      },
      
      //轮播图方法 移除方法
      handleRemove(file) {
        console.log(file.url);
        this.editDept.carouselImages.pop(file.url);
        this.fileList.pop(file);
        console.log(this.fileList);

        console.log(this.editDept.carouselImages);
      },
      handlePictureCardPreview(file) {
        // console.log(file.url);
        this.editSpu.carouselImages.push(file.url);
        this.fileList.push({url:file.url})
        console.log(this.fileList);
        this.dialogVisible = false;
        console.log( this.editSpu.carouselImages);
      }
    }
}
</script>

<style>

</style>